<template>
  <div>
    <a-modal :footer="null" :visible="visible" title="工资详情" @cancel="cancel" class="contentBox" width="423px">
      <div class="content pb20">
        <div class="bg pt12">
          <div class="flex-center-center tc-white">
            <div>{{ options.empName }}</div>
            <a-divider type="vertical" v-if="options.depName" />
            <div>{{ options.depName }}</div>
          </div>
          <div class="fs50 tc-white flex-center-center mv4">
            <a-statistic value-style="color:white" :precision="2" :value="options.salaryReal" />
          </div>
          <div class="ta-center tc-white fs16">实发金额(元)</div>
        </div>

        <div v-if="keys && keys.length > 0" class="mh20 content-box box-shadow bgc-white br4" style="margin-top: -64px" :style="bgImg">
          <div class="p12 ta-left fs16 fw500">基础项目</div>
          <div v-for="item in keys" :key="item.key" class="p12 flex-center-between">
            <div>{{ item.name }}</div>
            <div>{{ item.value }}</div>
          </div>
        </div>

        <div v-if="keysOther && keysOther.length > 0" class="mh20 mt20 content-box box-shadow bgc-white br4" :style="bgImg">
          <div class="p12 ta-left fs16 fw500">其他明细</div>
          <div v-for="item in keysOther" :key="item.key" class="p12 flex-center-between">
            <div>{{ item.name }}</div>
            <div>{{ item.value }}</div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "ModalDetail",

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      companyName: this.$store.state.hr.companyName,
      bgImg: {},
      bgImg2: {},
      keys: [
        {
          name: "应发工资",
          key: "salaryAmount",
          value: ""
        },
        {
          name: "实发工资",
          key: "salaryReal",
          value: ""
        }
      ],
      keysOther: []
    };
  },
  mounted() {},
  watch: {
    visible: {
      handler(val) {
        let tempKeys = [
          {
            name: "手机号",
            key: "phone",
            value: ""
          },
          {
            name: "个人所得税",
            key: "empTax",
            value: ""
          },
          {
            name: "个人社保",
            key: "empSoc",
            value: ""
          },
          {
            name: "个人公积金",
            key: "empPf",
            value: ""
          },
          {
            name: "基本工资",
            key: "salaryBasic",
            value: ""
          },
          {
            name: "应发工资",
            key: "salaryAmount",
            value: ""
          },
          {
            name: "实发工资",
            key: "salaryReal",
            value: ""
          }
        ];
        if (val) {
          const initKeys = window.location.host.includes("csxr.cn")
            ? [
                { name: "应发工资", key: "salaryAmount", value: "" },
                { name: "扣个人社保", key: "empSoc", value: "" }
              ]
            : [
                { name: "应发工资", key: "salaryAmount", value: "" },
                { name: "扣个人社保", key: "empSoc", value: "" },
                { name: "基本工资", key: "salaryBasic", value: "" },
                { name: "扣个人公积金", key: "empPf", value: "" },
                { name: "扣个人所得税", key: "empTax", value: "" },
                { name: "实发工资", key: "salaryReal", value: "" }
              ];
          this.setUI();
          tempKeys = initKeys;
          tempKeys.forEach((item) => {
            item.value = this.options[item.key];
          });
          let tempKeysOther = [];
          if (this.options.salaryBillFieldsDOList && this.options.salaryBillFieldsDOList.length) {
            if (this.options.showEmptyValue === true) {
              this.options.salaryBillFieldsDOList.map((key) => {
                if (key.fieldValue || key.fieldValue === 0 || key.fieldValue === "0") {
                  tempKeysOther.push({
                    name: key.fieldName,
                    value: key.fieldValue
                  });
                }
              });
            }
            if (this.options.showEmptyValue === false) {
              this.options.salaryBillFieldsDOList.map((key) => {
                if (key.fieldValue && key.fieldValue !== "0") {
                  tempKeysOther.push({
                    name: key.fieldName,
                    value: key.fieldValue
                  });
                }
              });
            }
          }
          if (this.options.showEmptyValue === false) {
            tempKeys = tempKeys.filter((item) => item.value && item.value !== "0");
            tempKeysOther = tempKeysOther.filter((item) => item.value && item.value !== "0");
          } else {
            tempKeys = tempKeys.filter((item) => item.value || item.value === 0 || item.value === "0");
            tempKeysOther = tempKeysOther.filter((item) => item.value || item.value === 0 || item.value === "0");
          }
          this.keys = tempKeys;
          this.keysOther = tempKeysOther;
        }
      }
    }
  },

  methods: {
    setUI() {
      this.bgImg = {
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='270' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.2' text-anchor='middle' dominant-baseline='middle' transform='rotate(-20, 100 100)'%3E${
          this.companyName + "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0" + this.options.empName
        }%3C/text%3E%3C/svg%3E")`
      };
    },
    // 取消
    cancel() {
      this.$emit("change", { visible: false, options: {} });
    }
  }
};
</script>
<style lang="scss" scoped>
.contentBox {
  .content {
    width: 375px;
    background: #fafbfb;
    overflow: auto;
    text-align: center;
    .bg {
      height: 180px;
      background: var(--primary);
      border-bottom-left-radius: 70%;
      border-bottom-right-radius: 70%;
    }
    .content-box {
      overflow: auto;
    }
  }
}
</style>
